<template>
  <layout fixed-navbar>
    <news-navbar>资讯列表</news-navbar>
    <div class="mp-16">
      <van-list
        :immediate-check="false"
        v-model="loading"
        :finished="finished"
        @load="onLoad">
        <exhibition-list>
          <router-link
            v-for="(item, i) in list"
            :to="'/news/' + item.id"
            :key="i">
            <exhibition-item :model="item"/>
          </router-link>
        </exhibition-list>
      </van-list>
    </div>
  </layout>
</template>

<script>
import Layout from '@/components/Layout'
import NewsNavbar from '@/components/NewsNavbar'
import ExhibitionList from '@/components/ExhibitionList'
import ExhibitionItem from '@/components/ExhibitionItem'
import { getNewsList } from '@/api'

export default {
  components: {
    Layout,
    NewsNavbar,
    ExhibitionList,
    ExhibitionItem
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1
    }
  },
  async created () {
    this.onLoad()
  },
  methods: {
    async getExhibitionList (page) {
      const { code, data } = await getNewsList({
        params: {
          page,
          pageSize: 10
        }
      })
      if (code === 1) {
        let rawData = data.list
        rawData = rawData.map((e) => {
          return {
            id: e.news_id,
            title: e.news_title,
            image: e.news_logo,
            date: e.news_time
          }
        })
        return { list: rawData, total: data.totalSize }
      }
      return { list: [], total: 0 }
    },
    async onLoad () {
      const { list, total } = await this.getExhibitionList(this.page++)

      for (const item of list) {
        this.list.push(item)
      }
      this.loading = false
      if (this.list.length >= total) {
        this.finished = true
      }
    }
  }
}
</script>
